<script setup lang="ts">
  import { ref } from 'vue';
  import dayjs from 'dayjs';
  import { BasicTable, useTable } from '@/components/Table';
  import { GetCollectionCountApi } from '@/api/collection';
  import { Tag } from '@/components/InfoTag';

  const info = ref({});

  const [registerTable, { getRawDataSource }] = useTable({
    title: '代收订单统计',
    canResize: true,
    columns: [
      {
        title: '统计日期',
        dataIndex: 'create_time',
        fixed: 'left',
        width: 150,
      },
      {
        title: '成单总额',
        dataIndex: 'totalOrderAmount',
        resizable: true,
      },
      {
        title: '成单总数',
        dataIndex: 'totalOrderCount',
        resizable: true,
      },
      {
        title: '失败总额',
        dataIndex: 'totalFailureAmount',
        resizable: true,
      },
      {
        title: '失败总数',
        dataIndex: 'totalFailureCount',
        resizable: true,
      },
      {
        title: '接单佣金',
        dataIndex: 'commission',
        resizable: true,
      },
      {
        title: '下级返点',
        dataIndex: 'rebate',
        resizable: true,
      },
      {
        title: '充值金额',
        dataIndex: 'payAmount',
        resizable: true,
      },
      {
        title: '提现金额',
        dataIndex: 'withdrawal',
        resizable: true,
      },
      {
        title: '余额转出',
        dataIndex: 'transferOut',
        resizable: true,
      },
      {
        title: '手工扣减',
        dataIndex: 'deduction',
        resizable: true,
      },
      {
        title: '手工加账',
        dataIndex: 'credit',
        resizable: true,
      },
      {
        title: '当前余额',
        dataIndex: 'balance',
        resizable: true,
      },
      {
        title: '更新时间',
        dataIndex: 'update_time',
        resizable: true,
      },
    ],
    bordered: true,
    showSelectionBar: false,
    showTableSetting: true,
    accordion: true, // 手风琴效果
    api: GetCollectionCountApi,
    fetchSetting: {
      listField: 'list',
    },
    afterFetch: () => {
      const data = getRawDataSource();
      info.value = data;
    },
    useSearchForm: false,
    formConfig: {
      labelWidth: 120,
      schemas: [
        {
          field: 'orderStatus',
          label: '操作类型',
          component: 'Select',
          colProps: {
            span: 6,
          },
          componentProps: {
            options: [
              {
                label: '手动',
                value: '0',
              },
              {
                label: '自动',
                value: '1',
              },
              {
                label: '第三方',
                value: '2',
              },
            ],
          },
        },
        {
          field: 'orderNo',
          label: '通道名称',
          component: 'Input',
          colProps: {
            span: 6,
          },
        },
      ],
    },
    rowKey: 'id',
    takeCare: '这是注意事项',
  });
</script>
<template>
  <main style="padding: 16px">
    <a-row :gutter="16">
      <a-col :span="24" style="margin-top: 16px">
        <BasicTable @register="registerTable">
          <template #toolbar>
            <Tag title="全部订单总额" color="green">{{ info.allTotalAmount }}</Tag>
            <Tag title="全部订单总数" color="green">{{ info.allTotal || 0 }}</Tag>
            <Tag title="全部成单总额" color="green">{{ info.successTotalAmount || 0 }}</Tag>
            <Tag title="全部成单总数" color="green">{{ info.successTotal || 0 }}</Tag>
            <Tag title="全部总佣金" color="green">{{ info.totalCommission || 0 }}</Tag>
            <Tag title="下级总返点" color="green">{{ info.totalRebate || 0 }}</Tag>
          </template>
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'create_time'">
              {{ dayjs(record.create_time * 1000).format('YYYY-MM-DD') }}
            </template>
            <template v-if="column.key === 'update_time'">
              {{ dayjs(record.create_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}
            </template>
            <template v-if="column.key === 'type'">{{
              record.type === '0' ? '手动' : record.type === '1' ? '自动' : '第三方'
            }}</template>
            <template v-if="column.key === 'status'">
              <a-tag :color="record.status === '0' ? 'red' : 'green'">{{
                record.status === '0' ? '关闭' : '开启'
              }}</a-tag>
            </template>
            <template v-if="column.key === 'rate'">
              <a-tag color="#c78787">{{ record.rate }}%</a-tag>
            </template>
          </template>
        </BasicTable>
      </a-col>
    </a-row>
  </main>
</template>
